<template>
  <section class="page-container">
    <el-carousel
      :interval="5000"
      arrow="never"
      indicator-position="none"
      height="850px"
      class="carousel animate__animated  animate__backInLeft"
    >
      <el-carousel-item
        class="carousel-item width90"
      >
        <img
          src="https://oss.qiacaiba.com/screen/screen/detail03_content001.png"
          alt=""
          style="margin-top: -20px;"
        >
      </el-carousel-item>
      <el-carousel-item class="carousel-item width80">
        <img
          src="https://oss.qiacaiba.com/screen/screen/detail03_content002.png"
          alt=""
        >
      </el-carousel-item>
      <el-carousel-item class="carousel-item width80">
        <img
          src="https://oss.qiacaiba.com/screen/screen/detail03_content003.png"
          alt=""
        >
      </el-carousel-item>
    </el-carousel>
    <!--  返回图标-->
    <section
      class="back"
      @click="goBack"
    >
      <img
        src="https://oss.qiacaiba.com/screen/screen/back.png"
        alt=""
      >
    </section>
    <!-- 技术支持   -->
    <section class="copyRight">
      <img
        src="https://oss.qiacaiba.com/screen/screen/copyright_txt.png"
        alt=""
      >
    </section>
    <!--  logo  -->
    <section class="logo">
      <img
        src="https://oss.qiacaiba.com/screen/screen/logo01.png"
        alt=""
      >
    </section>
  </section>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
const goBack = () => {
  router.go(-1);
};
</script>
<style scoped lang="scss">
.logo{
  position: fixed;
  top: 80px;
  left: 90px;
  width: 68px;
  height: 88px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.copyRight {
  position: fixed;
  bottom: 40px;
  right: 130px;
  width: 255px;
  height: 16px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.page-container {
  padding: 0 30px;

  .carousel {
    width: 100%;
    height: 850px;
    margin-top: 70px;

    &-item {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;

      &.width80 {
        img {
          width: 86%;
        }
      }
      &.width90{
        img {
          width: 95%;
        }
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .back {
    width: 116px;
    height: 54px;
    position: fixed;
    right: 40px;
    top: 80px;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
